'use client'

import { useState } from 'react'
import { Save, Shield, Bell, Globe, Database, Server, Users, FileText } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

export default function SystemSettings() {
  const [activeTab, setActiveTab] = useState('general')
  const [isSaving, setIsSaving] = useState(false)

  const tabs = [
    { id: 'general', label: '基本设置', icon: Globe },
    { id: 'security', label: '安全设置', icon: Shield },
    { id: 'notifications', label: '通知设置', icon: Bell },
    { id: 'database', label: '数据库设置', icon: Database },
    { id: 'system', label: '系统配置', icon: Server }
  ]

  const handleSave = async () => {
    setIsSaving(true)
    // 模拟保存操作
    await new Promise(resolve => setTimeout(resolve, 1000))
    setIsSaving(false)
    // 这里可以添加成功提示
  }

  const renderGeneralSettings = () => (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">网站信息</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="text-sm font-medium">网站名称</label>
              <Input
                defaultValue="知识库管理系统"
                className="mt-1"
                placeholder="输入网站名称"
              />
            </div>
            <div>
              <label className="text-sm font-medium">网站描述</label>
              <Input
                defaultValue="专业的知识库管理和分享平台"
                className="mt-1"
                placeholder="输入网站描述"
              />
            </div>
          </div>
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="text-sm font-medium">网站地址</label>
              <Input
                defaultValue="https://zhishiku.example.com"
                className="mt-1"
                placeholder="输入网站地址"
              />
            </div>
            <div>
              <label className="text-sm font-medium">管理员邮箱</label>
              <Input
                defaultValue="admin@example.com"
                className="mt-1"
                placeholder="输入管理员邮箱"
              />
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">内容设置</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="text-sm font-medium">每页显示文章数</label>
              <Input
                type="number"
                defaultValue="20"
                className="mt-1"
                min="1"
                max="100"
              />
            </div>
            <div>
              <label className="text-sm font-medium">允许评论</label>
              <select
                defaultValue="true"
                className="w-full mt-1 px-3 py-2 border border-input rounded-md bg-background text-sm"
              >
                <option value="true">是</option>
                <option value="false">否</option>
              </select>
            </div>
          </div>
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="text-sm font-medium">允许注册</label>
              <select
                defaultValue="true"
                className="w-full mt-1 px-3 py-2 border border-input rounded-md bg-background text-sm"
              >
                <option value="true">是</option>
                <option value="false">否</option>
              </select>
            </div>
            <div>
              <label className="text-sm font-medium">需要邮箱验证</label>
              <select
                defaultValue="true"
                className="w-full mt-1 px-3 py-2 border border-input rounded-md bg-background text-sm"
              >
                <option value="true">是</option>
                <option value="false">否</option>
              </select>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )

  const renderSecuritySettings = () => (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">密码策略</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="text-sm font-medium">最小密码长度</label>
              <Input
                type="number"
                defaultValue="8"
                className="mt-1"
                min="6"
                max="20"
              />
            </div>
            <div>
              <label className="text-sm font-medium">密码复杂度要求</label>
              <select
                defaultValue="medium"
                className="w-full mt-1 px-3 py-2 border border-input rounded-md bg-background text-sm"
              >
                <option value="low">低（仅字母数字）</option>
                <option value="medium">中（包含特殊字符）</option>
                <option value="high">高（大小写+数字+特殊字符）</option>
              </select>
            </div>
          </div>
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="text-sm font-medium">密码过期天数</label>
              <Input
                type="number"
                defaultValue="90"
                className="mt-1"
                min="0"
                placeholder="0表示永不过期"
              />
            </div>
            <div>
              <label className="text-sm font-medium">登录失败锁定</label>
              <Input
                type="number"
                defaultValue="5"
                className="mt-1"
                min="1"
                max="10"
              />
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">会话管理</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="text-sm font-medium">会话超时时间（分钟）</label>
              <Input
                type="number"
                defaultValue="30"
                className="mt-1"
                min="5"
                max="480"
              />
            </div>
            <div>
              <label className="text-sm font-medium">最大并发登录数</label>
              <Input
                type="number"
                defaultValue="3"
                className="mt-1"
                min="1"
                max="10"
              />
            </div>
          </div>
          <div>
            <label className="text-sm font-medium">允许记住登录状态</label>
            <select
              defaultValue="true"
              className="w-full mt-1 px-3 py-2 border border-input rounded-md bg-background text-sm"
            >
              <option value="true">是</option>
              <option value="false">否</option>
            </select>
          </div>
        </CardContent>
      </Card>
    </div>
  )

  const renderNotificationSettings = () => (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">邮件通知</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="text-sm font-medium">SMTP服务器</label>
              <Input
                defaultValue="smtp.example.com"
                className="mt-1"
                placeholder="输入SMTP服务器地址"
              />
            </div>
            <div>
              <label className="text-sm font-medium">SMTP端口</label>
              <Input
                type="number"
                defaultValue="587"
                className="mt-1"
                placeholder="输入SMTP端口"
              />
            </div>
          </div>
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="text-sm font-medium">邮箱账号</label>
              <Input
                defaultValue="noreply@example.com"
                className="mt-1"
                placeholder="输入邮箱账号"
              />
            </div>
            <div>
              <label className="text-sm font-medium">邮箱密码</label>
              <Input
                type="password"
                defaultValue=""
                className="mt-1"
                placeholder="输入邮箱密码"
              />
            </div>
          </div>
          <div>
            <label className="text-sm font-medium">启用TLS加密</label>
            <select
              defaultValue="true"
              className="w-full mt-1 px-3 py-2 border border-input rounded-md bg-background text-sm"
            >
              <option value="true">是</option>
              <option value="false">否</option>
            </select>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">通知事件</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-3">
            {[
              { event: '用户注册', email: true, system: true },
              { event: '新文章发布', email: false, system: true },
              { event: '评论回复', email: true, system: false },
              { event: '系统维护', email: true, system: true },
              { event: '安全警告', email: true, system: true }
            ].map((item) => (
              <div key={item.event} className="flex items-center justify-between p-3 border border-border rounded-lg">
                <span className="font-medium">{item.event}</span>
                <div className="flex items-center space-x-4">
                  <label className="flex items-center space-x-2">
                    <input
                      type="checkbox"
                      defaultChecked={item.email}
                      className="rounded border-gray-300"
                    />
                    <span className="text-sm">邮件</span>
                  </label>
                  <label className="flex items-center space-x-2">
                    <input
                      type="checkbox"
                      defaultChecked={item.system}
                      className="rounded border-gray-300"
                    />
                    <span className="text-sm">系统</span>
                  </label>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )

  const renderDatabaseSettings = () => (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">数据库连接</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="text-sm font-medium">数据库类型</label>
              <select
                defaultValue="postgresql"
                className="w-full mt-1 px-3 py-2 border border-input rounded-md bg-background text-sm"
              >
                <option value="postgresql">PostgreSQL</option>
                <option value="mysql">MySQL</option>
                <option value="sqlite">SQLite</option>
              </select>
            </div>
            <div>
              <label className="text-sm font-medium">主机地址</label>
              <Input
                defaultValue="localhost"
                className="mt-1"
                placeholder="输入数据库主机地址"
              />
            </div>
          </div>
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="text-sm font-medium">端口</label>
              <Input
                type="number"
                defaultValue="5432"
                className="mt-1"
                placeholder="输入数据库端口"
              />
            </div>
            <div>
              <label className="text-sm font-medium">数据库名</label>
              <Input
                defaultValue="zhishiku"
                className="mt-1"
                placeholder="输入数据库名称"
              />
            </div>
          </div>
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="text-sm font-medium">用户名</label>
              <Input
                defaultValue="postgres"
                className="mt-1"
                placeholder="输入数据库用户名"
              />
            </div>
            <div>
              <label className="text-sm font-medium">密码</label>
              <Input
                type="password"
                defaultValue=""
                className="mt-1"
                placeholder="输入数据库密码"
              />
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">数据库维护</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="text-sm font-medium">自动备份</label>
              <select
                defaultValue="true"
                className="w-full mt-1 px-3 py-2 border border-input rounded-md bg-background text-sm"
              >
                <option value="true">启用</option>
                <option value="false">禁用</option>
              </select>
            </div>
            <div>
              <label className="text-sm font-medium">备份频率</label>
              <select
                defaultValue="daily"
                className="w-full mt-1 px-3 py-2 border border-input rounded-md bg-background text-sm"
              >
                <option value="hourly">每小时</option>
                <option value="daily">每天</option>
                <option value="weekly">每周</option>
              </select>
            </div>
          </div>
          <div>
            <label className="text-sm font-medium">备份保留天数</label>
            <Input
              type="number"
              defaultValue="30"
              className="mt-1"
              min="1"
              max="365"
            />
          </div>
        </CardContent>
      </Card>
    </div>
  )

  const renderSystemSettings = () => (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">系统信息</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">系统版本</span>
                <Badge variant="outline">v1.0.0</Badge>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">Node.js版本</span>
                <Badge variant="outline">v18.17.0</Badge>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">数据库版本</span>
                <Badge variant="outline">PostgreSQL 15</Badge>
              </div>
            </div>
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">运行时间</span>
                <Badge variant="outline">15天 8小时</Badge>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">内存使用</span>
                <Badge variant="outline">256MB / 1GB</Badge>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">CPU使用率</span>
                <Badge variant="outline">12%</Badge>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">日志设置</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="text-sm font-medium">日志级别</label>
              <select
                defaultValue="info"
                className="w-full mt-1 px-3 py-2 border border-input rounded-md bg-background text-sm"
              >
                <option value="error">仅错误</option>
                <option value="warn">警告及以上</option>
                <option value="info">信息及以上</option>
                <option value="debug">调试及以上</option>
              </select>
            </div>
            <div>
              <label className="text-sm font-medium">日志保留天数</label>
              <Input
                type="number"
                defaultValue="90"
                className="mt-1"
                min="1"
                max="365"
              />
            </div>
          </div>
          <div>
            <label className="text-sm font-medium">启用访问日志</label>
            <select
              defaultValue="true"
              className="w-full mt-1 px-3 py-2 border border-input rounded-md bg-background text-sm"
            >
              <option value="true">是</option>
              <option value="false">否</option>
            </select>
          </div>
        </CardContent>
      </Card>
    </div>
  )

  const renderTabContent = () => {
    switch (activeTab) {
      case 'general':
        return renderGeneralSettings()
      case 'security':
        return renderSecuritySettings()
      case 'notifications':
        return renderNotificationSettings()
      case 'database':
        return renderDatabaseSettings()
      case 'system':
        return renderSystemSettings()
      default:
        return renderGeneralSettings()
    }
  }

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">系统设置</h1>
          <p className="text-gray-600 mt-1">管理系统配置和参数</p>
        </div>
        <Button onClick={handleSave} disabled={isSaving}>
          <Save className="h-4 w-4 mr-2" />
          {isSaving ? '保存中...' : '保存设置'}
        </Button>
      </div>

      {/* 设置标签页 */}
      <div className="border-b border-border">
        <nav className="flex space-x-8">
          {tabs.map((tab) => {
            const Icon = tab.icon
            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`flex items-center space-x-2 py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
                  activeTab === tab.id
                    ? 'border-primary text-primary'
                    : 'border-transparent text-muted-foreground hover:text-foreground'
                }`}
              >
                <Icon className="h-4 w-4" />
                <span>{tab.label}</span>
              </button>
            )
          })}
        </nav>
      </div>

      {/* 设置内容 */}
      {renderTabContent()}
    </div>
  )
}
